<!DOCTYPE html>
<!--
  Copyright 2016 Google Inc.

  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to deal
  in the Software without restriction, including without limitation the rights
  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  copies of the Software, and to permit persons to whom the Software is
  furnished to do so, subject to the following conditions:

  The above copyright notice and this permission notice shall be included in
  all copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.
-->
<html>
<head>
  <meta charset="utf-8">
  <title>List Item - Material Components Catalog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
  <link rel="stylesheet" href="/assets/list.css">
  <script src="/ready.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body class="mdc-typography">
<header class="mdc-toolbar mdc-toolbar--fixed">
  <div class="mdc-toolbar__row">
    <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
      <a href="/" class="catalog-back mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
      <span class="mdc-toolbar__title catalog-title">List</span>
    </section>
  </div>
</header>
<main>
  <div class="mdc-toolbar-fixed-adjust"></div>
  <section class="hero">
    <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars" aria-orientation="vertical">
      <li class="mdc-list-item" tabindex="-1">
            <span class="mdc-list-item__graphic" role="presentation">
              <i class="material-icons" aria-hidden="true">folder</i>
            </span>
        <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Photos</span>
              <span class="mdc-list-item__secondary-text">Jan 9, 2014</span>
            </span>
        <a href="#" class="mdc-list-item__meta material-icons"
           aria-label="View more information" title="More info"
           onclick="event.preventDefault();">
          info
        </a>
      </li>
      <li class="mdc-list-item mdc-list-item--selected" tabindex="0" aria-selected="true">
            <span class="mdc-list-item__graphic" role="presentation">
              <i class="material-icons" aria-hidden="true">folder</i>
            </span>
        <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Recipes</span>
              <span class="mdc-list-item__secondary-text">Jan 17, 2014</span>
            </span>
        <a href="#" class="mdc-list-item__meta material-icons"
           aria-label="View more information" title="More info"
           onclick="event.preventDefault();">
          info
        </a>
      </li>
      <li class="mdc-list-item">
            <span class="mdc-list-item__graphic" role="presentation">
              <i class="material-icons" aria-hidden="true">folder</i>
            </span>
        <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Work</span>
              <span class="mdc-list-item__secondary-text">Jan 28, 2014</span>
            </span>
        <a href="#" class="mdc-list-item__meta material-icons"
           aria-label="View more information" title="More info"
           onclick="event.preventDefault();">
          info
        </a>
      </li>
    </ul>
  </section>

  <section class="preamble mdc-typography--body1">
    <aside>
      <p>
        <em>NOTE:</em> For the purposes of this demo, we've set a max-width of 600px on all
        <code>mdc-list</code> elements, and surrounded them by a 1px border. This is
        not included in the base css, which has the list
        take up as much width as possible (since it's a block element).
      </p>
    </aside>
    <div class="mdc-form-field">
      <div class="mdc-checkbox">
        <input type="checkbox"
               class="mdc-checkbox__native-control"
               id="toggle-rtl"
               aria-labelledby="toggle-rtl-label" />
        <div class="mdc-checkbox__background">
          <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
            <path class="mdc-checkbox__checkmark-path" fill="none" stroke="white"
                  d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
          </svg>
          <div class="mdc-checkbox__mixedmark"></div>
        </div>
      </div>
      <label for="toggle-rtl" id="toggle-rtl-label">Toggle RTL</label>
    </div>
  </section>

  <div id="demo-wrapper">
    <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars" aria-orientation="vertical">
      <li class="mdc-list-item" tabindex="-1">
            <span class="mdc-list-item__graphic" role="presentation">
              <i class="material-icons" aria-hidden="true">folder</i>
            </span>
        <span class="mdc-list-item__text">
          <span class="mdc-list-item__primary-text">Photos</span>
          <span class="mdc-list-item__secondary-text">Jan 9, 2014</span>
        </span>
        <a href="#" class="mdc-list-item__meta material-icons"
           aria-label="View more information" title="More info"
           onclick="event.preventDefault();">
          info
        </a>
      </li>
      <li class="mdc-list-item mdc-list-item--activated" tabindex="0" aria-selected="true">
        <span class="mdc-list-item__graphic" role="presentation">
          <i class="material-icons" aria-hidden="true">folder</i>
        </span>
        <span class="mdc-list-item__text">
          <span class="mdc-list-item__primary-text">Recipes</span>
          <span class="mdc-list-item__secondary-text">Jan 17, 2014</span>
        </span>
        <a href="#" class="mdc-list-item__meta material-icons"
           aria-label="View more information" title="More info"
           onclick="event.preventDefault();">
          info
        </a>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__graphic" role="presentation">
          <i class="material-icons" aria-hidden="true">folder</i>
        </span>
        <span class="mdc-list-item__text">
          <span class="mdc-list-item__primary-text">Work</span>
          <span class="mdc-list-item__secondary-text">Jan 28, 2014</span>
        </span>
        <a href="#" class="mdc-list-item__meta material-icons"
           aria-label="View more information" title="More info"
           onclick="event.preventDefault();">
          info
        </a>
      </li>
    </ul>
  </div>

  <div id="demo-wrapper">
    <section>
      <h2>Custom Colors</h2>
      <section>
        <h3>Example - Two-Line Lists, Avatars, Metadata, Inset Dividers</h3>
        <div class="mdc-list-group demo-list-group--custom">
          <h3 class="mdc-list-group__subheader">Folders</h3>
          <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--custom demo-list--icon-placeholders"
              aria-orientation="vertical">
            <li class="mdc-list-item" tabindex="0">
              <span class="mdc-list-item__graphic" role="presentation">
                <i class="material-icons" aria-hidden="true">folder</i>
              </span>
              <span class="mdc-list-item__text">
                <span class="mdc-list-item__primary-text">Photos</span>
                <span class="mdc-list-item__secondary-text">Jan 9, 2014</span>
              </span>
              <a href="#" class="mdc-list-item__meta material-icons"
                 aria-label="View more information" title="More info"
                 onclick="event.preventDefault();">
                info
              </a>
            </li>
            <li class="mdc-list-item">
              <span class="mdc-list-item__graphic" role="presentation">
                <i class="material-icons" aria-hidden="true">folder</i>
              </span>
              <span class="mdc-list-item__text">
                <span class="mdc-list-item__primary-text">Recipes</span>
                <span class="mdc-list-item__secondary-text">Jan 17, 2014</span>
              </span>
              <a href="#" class="mdc-list-item__meta material-icons"
                 aria-label="View more information" title="More info"
                 onclick="event.preventDefault();">
                info
              </a>
            </li>
            <li class="mdc-list-item">
              <span class="mdc-list-item__graphic" role="presentation">
                <i class="material-icons" aria-hidden="true">folder</i>
              </span>
              <span class="mdc-list-item__text">
                <span class="mdc-list-item__primary-text">Work</span>
                <span class="mdc-list-item__secondary-text">Jan 28, 2014</span>
              </span>
              <a href="#" class="mdc-list-item__meta material-icons"
                 aria-label="View more information" title="More info"
                 onclick="event.preventDefault();">
                info
              </a>
            </li>
          </ul>
          <hr class="mdc-list-divider mdc-list-divider--inset">
          <h3 class="mdc-list-group__subheader">Files</h3>
          <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--custom demo-list--icon-placeholders"
              aria-orientation="vertical">
            <li class="mdc-list-item" tabindex="0">
              <span class="mdc-list-item__graphic" role="presentation">
                <i class="material-icons" aria-hidden="true">insert_drive_file</i>
              </span>
              <span class="mdc-list-item__text">
                <span class="mdc-list-item__primary-text">Vacation Itinerary</span>
                <span class="mdc-list-item__secondary-text">Jan 10, 2014</span>
              </span>
              <a href="#" class="mdc-list-item__meta material-icons"
                 aria-label="View more information" title="More info"
                 onclick="event.preventDefault();">
                info
              </a>
            </li>
            <li class="mdc-list-item">
              <span class="mdc-list-item__graphic" role="presentation">
                <i class="material-icons" aria-hidden="true">insert_drive_file</i>
              </span>
              <span class="mdc-list-item__text">
                <span class="mdc-list-item__primary-text">Kitchen Remodel</span>
                <span class="mdc-list-item__secondary-text">Jan 20, 2014</span>
              </span>
              <a href="#" class="mdc-list-item__meta material-icons"
                 aria-label="View more information" title="More info"
                 onclick="event.preventDefault();">
                info
              </a>
            </li>
          </ul>
        </div>
      </section>
    </section>
    <section>
      <h2>Single-Line List</h2>
      <section>
        <h3>Text only, non-interactive (no states)</h3>
        <ul class="mdc-list mdc-list--non-interactive demo-list">
          <li class="mdc-list-item">
            <span class="mdc-list-item__text">
              Single-line item
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__text">
              Single-line item
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__text">
              Single-line item
            </span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Text only (dense)</h3>
        <ul class="mdc-list mdc-list--dense demo-list"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__text">
              Single-line item
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__text">
              Single-line item
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__text">
              Single-line item
            </span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Graphic</h3>
        <aside><p><em>Note: The grey background is styled using demo placeholder styles</em></p></aside>
        <ul class="mdc-list demo-list demo-list--icon-placeholders"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item
            </span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Graphic (dense)</h3>
        <ul class="mdc-list mdc-list--dense demo-list demo-list--icon-placeholders"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item
            </span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Graphic Example - Icon with Text</h3>
        <ul class="mdc-list demo-list"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">
              network_wifi
            </i>
            <span class="mdc-list-item__text">
              Wi-Fi
            </span>
          </li>
          <li class="mdc-list-item">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">
              bluetooth
            </i>
            <span class="mdc-list-item__text">
              Bluetooth
            </span>
          </li>
          <li class="mdc-list-item">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">
              data_usage
            </i>
            <span class="mdc-list-item__text">
              Data Usage
            </span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Leading Checkbox</h3>
        <ul class="mdc-list demo-list" id="leading-checkbox-list"
            aria-orientation="vertical">
          <li class="mdc-list-item checkbox-list-ripple-surface" tabindex="0">
                <span class="mdc-list-item__graphic">
                  <div class="mdc-checkbox">
                    <input type="checkbox"
                           class="mdc-checkbox__native-control"
                           id="leading-checkbox-blueberries"/>
                    <div class="mdc-checkbox__background">
                      <svg class="mdc-checkbox__checkmark"
                           viewBox="0 0 24 24">
                        <path class="mdc-checkbox__checkmark-path"
                              fill="none"
                              stroke="white"
                              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                      </svg>
                      <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                  </div>
                </span>
            <span class="mdc-list-item__text">
              <label for="leading-checkbox-blueberries">Blueberries</label>
            </span>
          </li>
          <li class="mdc-list-item checkbox-list-ripple-surface">
                <span class="mdc-list-item__graphic">
                  <div class="mdc-checkbox">
                    <input type="checkbox"
                           class="mdc-checkbox__native-control"
                           id="leading-checkbox-boysenberries"/>
                    <div class="mdc-checkbox__background">
                      <svg class="mdc-checkbox__checkmark"
                           viewBox="0 0 24 24">
                        <path class="mdc-checkbox__checkmark-path"
                              fill="none"
                              stroke="white"
                              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                      </svg>
                      <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                  </div>
                </span>
            <span class="mdc-list-item__text">
              <label for="leading-checkbox-boysenberries">Boysenberries</label>
            </span>
          </li>
          <li class="mdc-list-item checkbox-list-ripple-surface">
                <span class="mdc-list-item__graphic">
                  <div class="mdc-checkbox">
                    <input type="checkbox"
                           class="mdc-checkbox__native-control"
                           id="leading-checkbox-strawberries"/>
                    <div class="mdc-checkbox__background">
                      <svg class="mdc-checkbox__checkmark"
                           viewBox="0 0 24 24">
                        <path class="mdc-checkbox__checkmark-path"
                              fill="none"
                              stroke="white"
                              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                      </svg>
                      <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                  </div>
                </span>
            <span class="mdc-list-item__text">
              <label for="leading-checkbox-strawberries">Strawberries</label>
            </span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Avatar List</h3>
        <ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item
            </span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Avatar List (dense)</h3>
        <ul class="mdc-list mdc-list--dense mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item
            </span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Example - Avatar with Text</h3>
        <ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <img class="mdc-list-item__graphic"
                 src="/images/animal1.svg"
                 width="56" height="56" alt="Panda">
            <span class="mdc-list-item__text">
              Panda
            </span>
          </li>
          <li class="mdc-list-item">
            <img class="mdc-list-item__graphic"
                 src="/images/animal2.svg"
                 width="56" height="56" alt="Sloth">
            <span class="mdc-list-item__text">
              Sloth
            </span>
          </li>
          <li class="mdc-list-item">
            <img class="mdc-list-item__graphic"
                 src="/images/animal3.svg"
                 width="56" height="56" alt="Brown Bear">
            <span class="mdc-list-item__text">
              Brown Bear
            </span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Metadata</h3>
        <ul class="mdc-list demo-list"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__text">
              Single-line item
            </span>
            <span class="mdc-list-item__meta">$10.00</span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__text">
              Single-line item
            </span>
            <span class="mdc-list-item__meta">$20.00</span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__text">
              Single-line item
            </span>
            <span class="mdc-list-item__meta">$30.00</span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Metadata (Dense)</h3>
        <ul class="mdc-list mdc-list--dense demo-list"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__text">
              Single-line item
            </span>
            <span class="mdc-list-item__meta">$10.00</span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__text">
              Single-line item
            </span>
            <span class="mdc-list-item__meta">$20.00</span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__text">
              Single-line item
            </span>
            <span class="mdc-list-item__meta">$30.00</span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Trailing Checkbox</h3>
        <ul class="mdc-list demo-list" id="trailing-checkbox-list"
            aria-orientation="vertical">
          <li class="mdc-list-item checkbox-list-ripple-surface" tabindex="0">
            <span class="mdc-list-item__text">
              <label for="trailing-checkbox-blueberries">Blueberries</label>
                </span>
            <span class="mdc-list-item__meta">
                  <div class="mdc-checkbox">
                    <input type="checkbox"
                           class="mdc-checkbox__native-control"
                           id="trailing-checkbox-blueberries"/>
                    <div class="mdc-checkbox__background">
                      <svg class="mdc-checkbox__checkmark"
                           viewBox="0 0 24 24">
                        <path class="mdc-checkbox__checkmark-path"
                              fill="none"
                              stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                      </svg>
                      <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                  </div>
                </span>
          </li>
          <li class="mdc-list-item checkbox-list-ripple-surface">
            <span class="mdc-list-item__text">
              <label for="trailing-checkbox-boysenberries">Boysenberries</label>
            </span>
            <span class="mdc-list-item__meta">
                  <div class="mdc-checkbox">
                    <input type="checkbox"
                           class="mdc-checkbox__native-control"
                           id="trailing-checkbox-boysenberries"/>
                    <div class="mdc-checkbox__background">
                      <svg class="mdc-checkbox__checkmark"
                           viewBox="0 0 24 24">
                        <path class="mdc-checkbox__checkmark-path"
                              fill="none"
                              stroke="white"
                              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                      </svg>
                      <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                  </div>
                </span>
          </li>
          <li class="mdc-list-item checkbox-list-ripple-surface">
            <span class="mdc-list-item__text">
              <label for="trailing-checkbox-strawberries">Strawberries</label>
            </span>
            <span class="mdc-list-item__meta">
                  <div class="mdc-checkbox">
                    <input type="checkbox"
                           class="mdc-checkbox__native-control"
                           id="trailing-checkbox-strawberries"/>
                    <div class="mdc-checkbox__background">
                      <svg class="mdc-checkbox__checkmark"
                           viewBox="0 0 24 24">
                        <path class="mdc-checkbox__checkmark-path"
                              fill="none"
                              stroke="white"
                              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                      </svg>
                      <div class="mdc-checkbox__mixedmark"></div>
                    </div>
                  </div>
                </span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Avatar + Metadata</h3>
        <ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item
            </span>
            <span class="mdc-list-item__meta">$10.00</span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item
            </span>
            <span class="mdc-list-item__meta">$20.00</span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item
            </span>
            <span class="mdc-list-item__meta">$30.00</span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Avatar + Metadata (Dense)</h3>
        <ul class="mdc-list mdc-list--dense mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item
            </span>
            <span class="mdc-list-item__meta">$10.00</span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item
            </span>
            <span class="mdc-list-item__meta">$20.00</span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item
            </span>
            <span class="mdc-list-item__meta">$30.00</span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Example - Avatar with Text and Icon</h3>
        <ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--avatar-and-meta-icon"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <img class="mdc-list-item__graphic"
                 src="/images/animal3.svg"
                 width="56" height="56" alt="Brown Bear">
            <span class="mdc-list-item__text">
              Brown Bear
            </span>
            <a class="mdc-list-item__meta material-icons" href="#"
               aria-label="Remove from favorites" title="Remove from favorites"
               onclick="event.preventDefault();">
              favorite
            </a>
          </li>
          <li class="mdc-list-item">
            <img class="mdc-list-item__graphic"
                 src="/images/animal1.svg"
                 width="56" height="56" alt="Panda">
            <span class="mdc-list-item__text">
              Panda
            </span>
            <a class="mdc-list-item__meta material-icons" href="#"
               aria-label="Add to favorites" title="Add to favorites"
               onclick="event.preventDefault();">
              favorite_border
            </a>
          </li>
          <li class="mdc-list-item">
            <img class="mdc-list-item__graphic"
                 src="/images/animal2.svg"
                 width="56" height="56" alt="Sloth">
            <span class="mdc-list-item__text">
              Sloth

            </span>
            <a class="mdc-list-item__meta material-icons" href="#"
               aria-label="Add to favorites" title="Add to favorites"
               onclick="event.preventDefault();">
              favorite_border
            </a>
          </li>
        </ul>
      </section>
    </section>
    <section>
      <h2>Two-Line List</h2>
      <section>
        <h3>Text-Only</h3>
        <ul class="mdc-list mdc-list--two-line demo-list"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Text-Only (Dense)</h3>
        <ul class="mdc-list mdc-list--two-line mdc-list--dense demo-list"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Graphic</h3>
        <ul class="mdc-list mdc-list--two-line demo-list  demo-list--icon-placeholders"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Graphic (Dense)</h3>
        <ul class="mdc-list mdc-list--two-line mdc-list--dense demo-list demo-list--icon-placeholders"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Avatar List</h3>
        <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Avatar List (dense)</h3>
        <ul class="mdc-list mdc-list--two-line mdc-list--dense mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Metadata</h3>
        <ul class="mdc-list mdc-list--two-line demo-list"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
            <span class="mdc-list-item__meta">$10.00</span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
            <span class="mdc-list-item__meta">$20.00</span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
            <span class="mdc-list-item__meta">$30.00</span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Metadata (Dense)</h3>
        <ul class="mdc-list mdc-list--two-line mdc-list--dense demo-list"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
            <span class="mdc-list-item__meta">$10.00</span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
            <span class="mdc-list-item__meta">$20.00</span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Two-line item</span>
              <span class="mdc-list-item__secondary-text">Secondary text</span>
            </span>
            <span class="mdc-list-item__meta">$30.00</span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Example - Two-line Avatar + Text + Icon</h3>
        <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__graphic" role="presentation">
              <i class="material-icons" aria-hidden="true">folder</i>
            </span>
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Photos</span>
              <span class="mdc-list-item__secondary-text">Jan 9, 2014</span>
            </span>
            <a href="#" class="mdc-list-item__meta material-icons"
               aria-label="View more information" title="More info"
               onclick="event.preventDefault();">
              info
            </a>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic" role="presentation">
              <i class="material-icons" aria-hidden="true">folder</i>
            </span>
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Recipes</span>
              <span class="mdc-list-item__secondary-text">Jan 17, 2014</span>
            </span>
            <a href="#" class="mdc-list-item__meta material-icons"
               aria-label="View more information" title="More info"
               onclick="event.preventDefault();">
              info
            </a>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic" role="presentation">
              <i class="material-icons" aria-hidden="true">folder</i>
            </span>
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Work</span>
              <span class="mdc-list-item__secondary-text">Jan 28, 2014</span>
            </span>
            <a href="#" class="mdc-list-item__meta material-icons"
               aria-label="View more information" title="More info"
               onclick="event.preventDefault();">
              info
            </a>
          </li>
        </ul>
      </section>
      <section>
        <h3>Lists w/ Ellipsis</h3>
        <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders"
            aria-orientation="vertical">
          <li href="#" class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__graphic">
              <i class="material-icons" aria-hidden="true">
                folder
              </i>
            </span>
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Photos</span>
              <span class="mdc-list-item__secondary-text">This is some secondary text</span>
            </span>
            <span class="mdc-list-item__meta">
              <i class="material-icons" aria-hidden="true">
                folder
              </i>
            </span>
          </li>
          <li href="#" class="mdc-list-item">
            <span class="mdc-list-item__graphic">
              <i class="material-icons" aria-hidden="true">
                folder
              </i>
            </span>
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Photos of my best photography using my finely tuned skills and eye</span>
              <span class="mdc-list-item__secondary-text">This is some secondary text</span>
            </span>
            <span class="mdc-list-item__meta">
              <i class="material-icons" aria-hidden="true">
                folder
              </i>
            </span>
          </li>
          <li href="#" class="mdc-list-item">
            <span class="mdc-list-item__graphic">
              <i class="material-icons" aria-hidden="true">
                folder
              </i>
            </span>
            <span class="mdc-list-item__text">
              <span class="mdc-list-item__primary-text">Work Photos</span>
              <span class="mdc-list-item__secondary-text">This is a description of work photos from the years 2018 to present time while I was a barista</span>
            </span>
            <span class="mdc-list-item__meta">
              <i class="material-icons" aria-hidden="true">
                folder
              </i>
            </span>
          </li>
        </ul>
      </section>
    </section>
    <section>
      <h2>List Dividers</h2>
      <section>
        <h3>Full-Width Dividers</h3>
        <ul class="mdc-list demo-list"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__text">
              Single-line item - section 1
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__text">
              Single-line item - section 1
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__text">
              Single-line item - section 1
          </span>
          </li>
          <li class="mdc-list-divider" role="separator"></li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__text">
              Single-line item - section 2
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__text">
              Single-line item - section 2
            </span>
          </li>
        </ul>
      </section>
      <section>
        <h3>Inset Dividers</h3>
        <ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars demo-list demo-list--icon-placeholders"
            aria-orientation="vertical">
          <li class="mdc-list-item" tabindex="0">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item - section 1
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item - section 1
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item - section 1
            </span>
          </li>
          <li class="mdc-list-divider mdc-list-divider--inset" role="separator"></li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item - section 2
            </span>
          </li>
          <li class="mdc-list-item">
            <span class="mdc-list-item__graphic"></span>
            <span class="mdc-list-item__text">
              Single-line item - section 2
            </span>
          </li>
        </ul>
      </section>
    </section>
    <section>
      <h2>List Groups</h2>
      <section>
        <h3>Basic Usage</h3>
        <div class="mdc-list-group">
          <h3 class="mdc-list-group__subheader">List 1</h3>
          <ul class="mdc-list demo-list" aria-orientation="vertical">
            <li class="mdc-list-item" tabindex="0">
              <span class="mdc-list-item__text">
                Single-line item
              </span>
            </li>
            <li class="mdc-list-item">
              <span class="mdc-list-item__text">
                Single-line item
              </span>
            </li>
            <li class="mdc-list-item">
              <span class="mdc-list-item__text">
                Single-line item
              </span>
            </li>
          </ul>
          <hr class="mdc-list-divider">
          <h3 class="mdc-list-group__subheader">List 2</h3>
          <ul class="mdc-list demo-list" aria-orientation="vertical">
            <li class="mdc-list-item" tabindex="0">
              <span class="mdc-list-item__text">
                Single-line item
              </span>
            </li>
            <li class="mdc-list-item">
              <span class="mdc-list-item__text">
                Single-line item
              </span>
            </li>
            <li class="mdc-list-item">
              <span class="mdc-list-item__text">
                Single-line item
              </span>
            </li>
          </ul>
        </div>
      </section>
      <section>
        <h3>Example - Two-Line Lists, Avatars, Metadata, Inset Dividers</h3>
        <div class="mdc-list-group">
          <h3 class="mdc-list-group__subheader">Folders</h3>
          <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders"
              aria-orientation="vertical">
            <li class="mdc-list-item" tabindex="0">
              <span class="mdc-list-item__graphic" role="presentation">
                <i class="material-icons" aria-hidden="true">folder</i>
              </span>
              <span class="mdc-list-item__text">
                <span class="mdc-list-item__primary-text">Photos</span>
                <span class="mdc-list-item__secondary-text">Jan 9, 2014</span>
              </span>
              <a href="#" class="mdc-list-item__meta material-icons"
                 aria-label="View more information" title="More info"
                 onclick="event.preventDefault();">
                info
              </a>
            </li>
            <li class="mdc-list-item">
              <span class="mdc-list-item__graphic" role="presentation">
                <i class="material-icons" aria-hidden="true">folder</i>
              </span>
              <span class="mdc-list-item__text">
                <span class="mdc-list-item__primary-text">Recipes</span>
                <span class="mdc-list-item__secondary-text">Jan 17, 2014</span>
              </span>
              <a href="#" class="mdc-list-item__meta material-icons"
                 aria-label="View more information" title="More info"
                 onclick="event.preventDefault();">
                info
              </a>
            </li>
            <li class="mdc-list-item">
              <span class="mdc-list-item__graphic" role="presentation">
                <i class="material-icons" aria-hidden="true">folder</i>
              </span>
              <span class="mdc-list-item__text">
                <span class="mdc-list-item__primary-text">Work</span>
                <span class="mdc-list-item__secondary-text">Jan 28, 2014</span>
              </span>
              <a href="#" class="mdc-list-item__meta material-icons"
                 aria-label="View more information" title="More info"
                 onclick="event.preventDefault();">
                info
              </a>
            </li>
          </ul>
          <hr class="mdc-list-divider mdc-list-divider--inset">
          <h3 class="mdc-list-group__subheader">Files</h3>
          <ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders"
              aria-orientation="vertical">
            <li class="mdc-list-item" tabindex="0">
              <span class="mdc-list-item__graphic" role="presentation">
                <i class="material-icons" aria-hidden="true">insert_drive_file</i>
              </span>
              <span class="mdc-list-item__text">
                <span class="mdc-list-item__primary-text">Vacation Itinerary</span>
                <span class="mdc-list-item__secondary-text">Jan 10, 2014</span>
              </span>
              <a href="#" class="mdc-list-item__meta material-icons"
                 aria-label="View more information" title="More info"
                 onclick="event.preventDefault();">
                info
              </a>
            </li>
            <li class="mdc-list-item">
              <span class="mdc-list-item__graphic" role="presentation">
                <i class="material-icons" aria-hidden="true">insert_drive_file</i>
              </span>
              <span class="mdc-list-item__text">
                <span class="mdc-list-item__primary-text">Kitchen Remodel</span>
                <span class="mdc-list-item__secondary-text">Jan 20, 2014</span>
              </span>
              <a href="#" class="mdc-list-item__meta material-icons"
                 aria-label="View more information" title="More info"
                 onclick="event.preventDefault();">
                info
              </a>
            </li>
          </ul>
        </div>
      </section>
    </section>
    <section>
      <h2>Interactive Lists (with ink ripple)</h2>
      <section>
        <h3>Example - Interactive List</h3>
        <nav class="mdc-list demo-list" data-demo-interactive-list>
          <a href="#" class="mdc-list-item" tabindex="0">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">
              network_wifi
            </i>
            <span class="mdc-list-item__text">
              Wi-Fi
            </span>
          </a>
          <a href="#" class="mdc-list-item">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">
              bluetooth
            </i>
            <span class="mdc-list-item__text">
              Bluetooth
            </span>
          </a>
          <a href="#" class="mdc-list-item">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">
              data_usage
            </i>
            <span class="mdc-list-item__text">
              Data Usage
            </span>
          </a>
        </nav>
      </section>
    </section>
  </div>
</main>

<script src="/assets/material-components-web.js" async></script>
<script>
  demoReady(function() {
    var checkboxes = document.querySelectorAll('.mdc-checkbox');
    [].forEach.call(checkboxes, function(checkbox) {
      var cbInstance = mdc.checkbox.MDCCheckbox.attachTo(checkbox);
      if (checkbox.parentElement.classList.contains('mdc-form-field')) {
        var ffInstance = mdc.formField.MDCFormField.attachTo(checkbox.parentElement);
        ffInstance.input = cbInstance;
      }
    });

    var demoWrapper = document.getElementById('demo-wrapper');
    var hero = document.querySelector('.hero');
    document.getElementById('toggle-rtl').addEventListener('change', function() {
      if (this.checked) {
        demoWrapper.setAttribute('dir', 'rtl');
        hero.setAttribute('dir', 'rtl');
      } else {
        demoWrapper.removeAttribute('dir');
        hero.removeAttribute('dir');
      }
    });

    var interactiveListItems = document.querySelectorAll(
      '[data-demo-interactive-list] .mdc-list-item, .hero .mdc-list-item'
    );
    for (var i = 0, li; li = interactiveListItems[i]; i++) {
      mdc.ripple.MDCRipple.attachTo(li);
      // Prevent link clicks from jumping demo to the top of the page
      li.addEventListener('click', function(evt) {
        evt.preventDefault();
      });
    }

    function clickHandler(evt, li) {
      if (evt.target === li) {
        var checkbox = li.querySelector('.mdc-checkbox__native-control');
        checkbox.checked = !checkbox.checked;
      }
    };

    function addRippleToListItems(list) {
      var listItems = list.querySelectorAll('.mdc-list-item');

      [].forEach.call(listItems, function(li) {
        mdc.ripple.MDCRipple.attachTo(li);
        li.addEventListener('click', function(e) {
          clickHandler(e, li);
        });
      });
    };

    [].slice.call(document.querySelectorAll('.mdc-list')).forEach(function(ele) {
      var list = mdc.list.MDCList.attachTo(ele);
      list.wrapFocus = true;
    });

    addRippleToListItems(document.getElementById('leading-checkbox-list'));
    addRippleToListItems(document.getElementById('trailing-checkbox-list'));
  });
</script>
</body>
</html>
